<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<c:if test="${sessionScope.account != null && sessionScope.account.listOption}">
    <div class="myFavorite">
            <div class="left">
                <h3>猜你喜欢: </h3>
                <p style="font-size: 16px">从这里挑选更多你喜欢的商品吧</p>
                <ul>
                    <c:forEach var="product" items="${sessionScope.myList}">
                        <li>
                            <a href="viewProduct?productId=${product.productId}">${product.name}</a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
            <div class="right">
                <input value=">" class="button" id="close">
            </div>
            <div class="center">
                <input value="<" class="button" id="open">
            </div>
    </div>
</c:if>

<script>
    $('.center').hide();

    $('#close').on('click',function () {
        $('.left').hide();
        $('.right').hide();
        $('.center').show();
    });
    $('#open').on('click',function () {
        $('.left').show();
        $('.right').show();
        $('.center').hide();
    });
</script>

<style>
    .myFavorite {
        text-align: left;
        z-index: 3;
        position: fixed;
        top: 150px;
        right: 20px;
    }

    .left {
        float: left;
        background-color: rgba(237, 196, 158, 0.9);
        padding: 2ch 0 2ch 2.5ch;
        border-radius: 40px 0 40px 40px;
    }

    .right {
        float: right;
        background-color: rgba(237, 196, 158, 0.9);
        border-radius: 0 10px 10px 0;
    }

    .button {
        text-align: center;
        background-color: transparent;
        border-style: none;
        width: 20px;
        height: 20px;
        font-weight: 700;
    }

    .button:focus {
        border-radius: 10px;
        outline-color: rgb(233, 164, 101);
        color: rgb(233, 164, 101);
    }

    .center {
        float: right;
        background-color: rgba(237, 196, 158, 0.9);
        border-radius: 10px;
    }
</style>